<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <link rel="shortcut icon" type="image/x-icon" href="../img/favicon.ico" />
    <title id="monitorTitle">Cluster Monitor</title>
    <link href="../vender/datatables/dataTables.bootstrap.css" rel="stylesheet" charset="utf-8" />
    <link rel="stylesheet" href="../vender/bootstrap-3.3.7/css/bootstrap.css"/>
    <link rel="stylesheet" href="../css/bootstrap-reset.css"/>
    <link rel="stylesheet" href="../vender/bootstrap-select-1.12.4/dist/css/bootstrap-select.css" />
    <link rel="stylesheet" href="../css/time-range.css" />
    <link rel="stylesheet" href="../vender/datetime/flatpickr.min.css" />
    <link rel="stylesheet" href="../css/common.css"/>
    <link rel="stylesheet" href="../css/cluster-monitor-detail.css"/>

    <link rel="stylesheet" href="../font-awesome/css/font-awesome.css" />
    <link rel="stylesheet" href="../css/style.css" />
    <link rel="stylesheet" href="../css/dashboard.css" />

    <script type="text/javascript" src="../vender/jquery/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="../vender/bootstrap-3.3.7/js/bootstrap.js"></script>
    <script type="text/javascript" src="../vender/sparrow/layer/layer.js"></script>
    <script type="text/javascript" src="../vender/bootstrap-select-1.12.4/dist/js/bootstrap-select.js"></script>
    <script src="../vender/datatables/jquery.dataTables.js"></script>
    <script src="../vender/datatables/dataTables.bootstrap.min.js"></script>

    <script src="../vender/amcharts/amcharts.js" type="text/javascript"></script>
    <script src="../vender/amcharts/serial.js" type="text/javascript"></script>
    <script src="../vender/amcharts/themes/light.js" type="text/javascript"></script>
    <script src="../vender/sparrow/ajax.js"></script>
    <script src="../core/userApi.js"></script>
    <script src="../vender/sparrow/util.js"></script>
    <script src="../vender/sparrow/smarty.js"></script>
    <script src="../js/redis-meta.js"></script>
    <script src="../js/common.js"></script>
    <script type="text/javascript" src="../vender/echarts/echarts.js"></script>

</head>
<body>
<div class="body-container container-color scrollbar-div scrollbar-div-1">
    <div class="data-container scrollbar">
        <div class="detail-header">
            <div class="cluster-name-container">
                <span id="clusterName"></span><i class="icon-medkit safe cursor" style="display:none" id="memory-doctor" title="Redis Memory Diagnosis"></i>
            </div>
            <div class="filter-container">
                <div class="select-node">
                    <form class="form-horizontal" role="form">
                        <div class="col-lg-10">
                            <select id="nodeList" class="selectpicker show-tick form-control" data-live-search="true" data-width="250px">
                            </select>
                        </div>
                    </form>
                </div>
                <div class="value-type-container">
                    <select class="selectpicker" data-width="100%" id="dataType">
                        <option value="max">max</option>
                        <option value="min">min</option>
                        <option value="avg">avg</option>
                    </select>
                </div>
                <div class="time-filter-container">
                    <a data-toggle="collapse" data-parent="#accordion" href="#time-select-panel" class="list-active">
                        <img src="../img/time.svg" class="time-img"/>
                        <span id="selected-range">Time ranges</span>
                    </a>
                </div>
            </div>
        </div>
        <!-- time selector panel -->
        <div id="time-select-panel" class="panel-collapse collapse">
            <div class="panel time-panel">
                <div class="item-group">
                    <div>
                        <h2 class="time-title">Time range</h2>
                        <span>From:</span>
                        <div>
                            <input type="text" id="startTime" class="time-item start-time" data-enable-time="true" data-time_24hr="true" placeholder="star time" readonly="readonly" />
                        </div>
                        <span>To:</span>
                        <div>
                            <input type="text" id="endTime" class="time-item end-time" data-enable-time="true" data-time_24hr="true" placeholder="end time" readonly="readonly" />
                        </div>
                        <div>
                            <button class="btn btn-primary btn-sm query" type="button" >Query</button>
                        </div>
                    </div>
                </div>
                <div class="time-range">
                    <div>
                        <div><h2>Quick ranges</h2></div>
                        <div class="relative-section">
                            <ul>
                                <li data="10"><a href="javascript:void(0);">Last 10 minutes</a></li>
                                <li data="30"><a href="javascript:void(0);">Last 30 minutes</a></li>
                                <li data="60"><a href="javascript:void(0);">Last 60 minutes</a></li>
                                <li data="720"><a href="javascript:void(0);">Last 12 hours</a></li>
                            </ul>
                            <ul>
                                <li data="1440"><a href="javascript:void(0);">Last 1 day</a></li>
                                <li data="4320"><a href="javascript:void(0);">Last 3 days</a></li>
                                <li data="10080"><a href="javascript:void(0);">Last 7 days</a></li>
                            </ul>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div class="detail-container">
            <div class="container-fluid">
                <div class="row">
                    <div class="panel panel-default my-panel">
                        <div class="panel-heading">
                            <div>
                                <span id="cluster-state"></span>

                                Cluster Nodes: <b class="label-info" id="cluster-nodes-number"></b> | Master Size: <b class="label-info" id="master-number"></b>
                            </div>
                            <div class="panel-heading-right">
                                <div class="btn-group">
                                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                        Command <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu" role="menu" >
                                        <li><a href="javascript:void(0);" id="config">config</a></li>
                                        <li><a href="javascript:void(0);" id="info">info</a></li>
                                    </ul>
                                </div>
                                <div class="query-container">
                                    <button type="button" class="btn btn-primary" id="query-db">Query</button>
                                </div>
                            </div>

                        </div>
                        <div class="base-info-list">
                            <ul>
                                <li>
                                    <span class="info-header-container">
                                        <i class="glyphicon glyphicon-hourglass info"></i>
                                        <span class="title">响应时间 : <span id="avg-response"></span>/ms</span>
                                    </span>
                                    <div id="top-response-time">
                                    </div>
                                </li>
                                <li>
                                    <span class="info-header-container">
                                        <i class="glyphicon glyphicon-piggy-bank info"></i>
                                        <span class="title">Key总数 : <span id="all-key"></span></span>
                                    </span>
                                    <div id="top-connection">
                                        <p class="top-item">Max: <span class="top_request_monitor" id="max-all-key"></span>
                                        </p>
                                        <p class="top-item">Min: <span class="top_request_monitor" id="min-all-key"></span>
                                        </p>
                                    </div>
                                </li>
                                <li>
                                    <span class="info-header-container">
                                        <i class="glyphicon glyphicon-transfer info"></i>
                                        <span class="title">平均连接数 : <span id="avg-connection"></span></span>
                                    </span>
                                    <div  id="top-avg-connection">
                                    </div>
                                </li>
                                <li>
                                    <span class="info-header-container">
                                        <i class="glyphicon glyphicon-cog"></i>
                                        <span class="title">每秒操作数 : <span id="avg-instantaneous"></span></span>
                                    </span>
                                    <div  id="top-avg-instantaneous">
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div><!-- .panel -->
                </div>

                <div class="row">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <div>
                                <span>Detail Charts</span>
                                <span class="instance-type">
                                    <span>Instance: </span><span id="instance" class="label-info"></span>
                                    <!--<span class="margin-left-10">Type: </span><span id="data-type" class="label-info"></span>-->
                                </span>
                            </div>
                        </div>
                        <div class="panel-body" >
                            <div class="row">
                                <div id="charts-cpu" class="col-xs-4 chart-sm" ></div>
                                <div id="charts-memory" class="col-xs-4 chart-sm" ></div>
                                <div id="charts-client" class="col-xs-4 chart-sm" ></div>
                                <div id="charts-ops" class="col-xs-4 chart-sm" ></div>
                                <div id="charts-commands" class="col-xs-4 chart-sm" ></div>
                                <div id="charts-Keyspace-expires" class="col-xs-4 chart-sm" ></div>
                                <div id="charts-hitRate" class="col-xs-4 chart-sm" ></div>
                                <div id="charts-memFragmentationRatio" class="col-xs-4 chart-sm" ></div>
                            </div><!-- .row -->
                        </div>
                        <div class="panel-body   scrollbar-div-1" >
                            <div class="slow-log-container">
                                <select id="logNodeList" class="selectpicker show-tick form-control" title="Slow Log" data-live-search="true" data-width="250px">
                                </select>
                            </div>
                            <div id="slow-log-table">
                                <table class="table table-bordered scrollbar">
                                    <thead>
                                    <tr>
                                        <th>Host</th>
                                        <th>Slow Date</th>
                                        <th>Run Time</th>
                                        <th>Type</th>
                                        <th>command</th>
                                    </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div><!-- .row -->
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="../vender/datetime/flatpickr.min.js"></script>
<script src="../js/monitor.js"></script>
<script src="../js/redis-query.js"></script>
</body>

</html>